<script setup lang="ts">
import { getQclRightData } from '@/api/Quancheng';
import alarmsTypePie from '@/components/ECharts/alarmsTypePie/index.vue';
import COMPONENT_TITLES from '@/constants/components/componentsTitle';

const alarmStatistics = ref({} as any);
const emit = defineEmits(['postMessage']);
const alarmsTypeHandle = (params: any) => {
  alarmStatistics.value.echartsData.forEach((item) => {
    if (item.name == params.name) {
      emit('postMessage', item.clickData, '告警类型统计', item.name);
    }
  });
};
//点击报警同样打开模块化
const alarmStatisticsDataHandler = (data, name, type) => {
  data.forEach((item) => {
    if (item.name == type) {
      emit('postMessage', item.clickData, name, type);
    }
  });
};
onMounted(async () => {
  const { data } = await getQclRightData({ type: 'alarmStatistics' });
  alarmStatistics.value = data.alarmStatistics;
});
</script>

<template>
  <div class="type-box">
    <div class="type-box-charts">
      <alarmsTypePie
        @click-data="alarmsTypeHandle"
        :title="COMPONENT_TITLES.ALARM_TYPE"
        :echarts-data="alarmStatistics.echartsData"
        :value="alarmStatistics.total"
      />
    </div>
    <div class="type-box-icon-box">
      <div class="type-box-icon-box-item">
        <div class="type-box-icon-box-item-font">
          <div>{{ alarmStatistics.total || 0 }}</div>
          <div>报警总数</div>
        </div>
        <img src="@/assets/largescreen/Totalnumberofalarms.png" alt="暂无" />
      </div>
      <div class="type-box-icon-box-item" @click="alarmStatisticsDataHandler(alarmStatistics.echartsData, '告警类型统计', '浓度报警')">
        <div class="type-box-icon-box-item-font">
          <div>{{ alarmStatistics.potencyAlarmNum || 0 }}</div>
          <div>浓度报警</div>
        </div>
        <img src="@/assets/largescreen/Concentrationalarm.png" alt="暂无" />
      </div>
      <div class="type-box-icon-box-item" @click="alarmStatisticsDataHandler(alarmStatistics.echartsData, '告警类型统计', '压力报警')">
        <div class="type-box-icon-box-item-font">
          <div>{{ alarmStatistics.pressureAlarmNum || 0 }}</div>
          <div>压力报警</div>
        </div>
        <img src="@/assets/largescreen/Pressurealarm.png" alt="暂无" />
      </div>
      <div class="type-box-icon-box-item" @click="alarmStatisticsDataHandler(alarmStatistics.echartsData, '告警类型统计', '流量报警')">
        <div class="type-box-icon-box-item-font">
          <div>{{ alarmStatistics.flowAlarmNum || 0 }}</div>
          <div>流量报警</div>
        </div>
        <img src="@/assets/largescreen/FlowAlarm.png" alt="暂无" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.type-box {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 2rem;

  .type-box-charts {
    width: 100%;
    height: 100%;
  }

  .type-box-icon-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;

    .type-box-icon-box-item {
      height: 5rem;
      background: rgba(0, 159, 255, 0.1);
      display: flex;
      box-sizing: border-box;
      justify-content: space-around;
      align-items: center;
      border-radius: 0.625rem;

      .type-box-icon-box-item-font {
        color: #ffffff;

        :first-child {
          font-size: 1.1875rem;
          font-family: PangMenZhengDao;
          font-weight: 400;
          margin-bottom: 8px;
        }

        :last-child {
          font-size: 0.8125rem;
        }
      }

      .active {
        color: #0be4f1;
      }

      img {
        width: 2.5rem;
        height: 2.5rem;
        cursor: pointer;
      }
    }
  }
}

@media (min-width: 3840px) {
  .type-box {
    display: grid;
    grid-template-rows: unset;
    grid-template-columns: 4fr 6fr; /* 第一列占4份，第二列占6份 */
    gap: 2rem;
  }
}
</style>
